<template>
	<view class="nav-container">
		<!-- 导航页 -->
		<view class="content">
			<img class="nav-img" src="@/static/images/login/login-title.png" />
			<view class="top-title">
				<view class="font">
					绿色能源综合管理平台
				</view>
			</view>

			<view class="con-left">
				<view class="flexBox">
					<view v-for="item in constant.modelList" :key="item.id" class="item-father"
						@click="handleClick(item)">
						<view class="bgc1">
							<img class="bgc2" src="@/static/images/nav/bgc2.png" alt="" />
							<img class="bgc3" src="@/static/images/nav/bgc3.png" alt="" />
							<img class="bgc4" src="@/static/images/nav/bgc4.png" alt="" />
							<img class="bgc5" src="@/static/images/nav/bgc5.png" alt="" />
							<img class="bgc6" :src="item.leftImg" alt="" />
						</view>
						<view class="bgc7">
							<view class="item-title">{{item.modelName}}</view>
						</view>
					</view>
				</view>

			</view>

			<view class="bottom-title">
				敢为人先 引领世界
			</view>
		</view>
	</view>
</template>

<script setup>
	import constant from "@/utils/constant.js";

	//选择选项
	const handleClick = (item) => {
		// console.log("选中项", item.id)
		uni.setStorageSync('zh-h5-select-park', JSON.stringify(item.id)); //

		uni.switchTab({
			url: `/pages/index/index`
		})
	}
</script>

<style lang="scss" scoped>
	.nav-container {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url("../../static/images/index/nav-bg.jpg");
		background-size: 100% 100%;

		.content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			/* 偏移自身的50% */
			width: 100%;
			/* 子元素宽度 */
			height: 400px;
			/* 子元素高度 */
			// background-color: gray;
			/* 子元素背景色 */
			display: flex;

			.nav-img {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				left: 40rpx;
			}

			.top-title {

				// display: flex;
				.font {
					position: absolute;
					// top: -72rpx;
					left: 17%;
					font-family: YouSheBiaoTiHei;
					font-size: 60rpx;
					background: linear-gradient(180deg, #f8faff, #5090ff);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
					cursor: default;
					// margin-bottom: 2.6875rem;
					z-index: 3 !important;
				}
			}

			.bottom-title {
				position: absolute;
				bottom: -72rpx;
				left: 31%;

				font-family: YouSheBiaoTiHei;
				font-size: 36rpx;
				color: #c3d7ff;
				cursor: default;
				z-index: 3;
			}

			.con-left {
				padding-top: 120rpx;

				.flexBox {
					position: absolute;
					z-index: 2;
					gap: 80rpx 40rpx;
					top: vh(150);
					left: 50%;
					transform: translateX(-50%);
					display: grid;
					// grid-template-columns: repeat(2, vw(410));
					grid-template-columns: repeat(2, 1fr);
					/* 每行两个元素，均分宽度 */

					column-gap: vw(820);
					row-gap: vh(44);

					@keyframes leftBox {
						0% {
							opacity: 0.1;
							transform: translateX(50%);
						}

						100% {
							opacity: 1;
							transform: translateX(0);
						}
					}

					@keyframes rightBox {
						0% {
							opacity: 0.1;
							transform: translateX(-50%);
						}

						100% {
							opacity: 1;
							transform: translateX(0);
						}
					}

					@keyframes float {
						25% {
							-webkit-transform: translateY(-4px);
						}

						50%,
						100% {
							-webkit-transform: translateY(0);
						}

						75% {
							-webkit-transform: translateY(4px);
						}
					}

					@keyframes rotate {
						0% {
							transform: rotate(0deg);
						}

						100% {
							transform: rotate(360deg);
							/* 旋转一周 */
						}
					}

					@keyframes rotateRight {
						0% {
							transform: rotate(0deg);
						}

						100% {
							transform: rotate(90deg);
							/* 或者其他你想要的度数 */
						}
					}

					.item-father {
						display: flex;
						align-items: center;
						width: 100%;

						.bgc1 {
							position: relative;
							width: 75px;
							height: 75px;
							background-image: url("@/static/images/nav/bgc1.png");
							background-size: 100% 100%;

							.bgc2 {
								position: absolute;
								top: 0;
								left: 0;
								width: 71px;
								height: 71px;
								/* 初始化旋转的起点 */
								transform-origin: center center;
								/* 应用动画，使用animation简写属性 */
								animation: rotate 7s linear infinite;
							}

							.bgc3 {
								position: absolute;
								top: 0px;
								left: 0px;
								width: 70px;
								height: 70px;
								/* 初始化旋转的起点 */
								transform-origin: center center;
								/* 应用动画，使用animation简写属性 */
								animation: rotate 7s linear infinite;
							}

							.bgc4 {
								position: absolute;
								top: 2px;
								left: 2px;
								width: 66px;
								height: 66px;
								/* 初始化旋转的起点 */
								transform-origin: center center;
								/* 应用动画，使用animation简写属性 */
								animation: rotate 7s linear infinite;
							}

							.bgc5 {
								position: absolute;
								top: 0px;
								left: 1px;
								width: 70px;
								height: 70px;
							}

							.bgc6 {
								position: absolute;
								top: 16px;
								left: 18px;
								width: 35px;
								height: 38px;
							}
						}

						.bgc7 {
							position: relative;
							cursor: pointer;
							box-sizing: border-box;
							padding-left: 15px;
							width: 98px;
							height: 45px;
							background-image: url("@/static/images/nav/wind-title-left.png");
							background-size: 100% 100%;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #ffffff;
							line-height: 45px;
							text-align: left;
							font-style: normal;

							&:hover {
								transform: scale(1.1);
							}

							img {
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
							}
						}

						&:nth-child(2n) {
							flex-direction: row-reverse;

							.bgc7 {
								background-image: url("@/static/images/nav/wind-title-right.png");
								padding-right: 40px;
								text-align: right;
							}
						}

						&:nth-child(2) {
							.bgc6 {
								// top: 35px;
								// left: 42px;
								// width: 41px;
								// height: 57px;
							}
						}

						&:nth-child(2n) {
							.bgc7 {
								padding-right: 15px;

							}
						}

						&:nth-child(5) {
							.bgc6 {
								top: 16px;
								left: 25px;
								width: 21px;
								height: 38px;
							}
						}
					}
				}
			}

			.con-right {}
		}
	}
</style>